<script setup lang="ts">
import StnCollapsePopBtn from "../StnCollapsePopBtn"
import {StIconIconify} from "st-common-ui-vue3"
import 'st-common-ui-vue3/es/components/StIconIconify/StIconIconify.css'
import Search from "@iconify-icons/tabler/search"
import Reload from '@iconify-icons/tabler/reload'
import {NCollapse, NCollapseItem} from 'naive-ui'
import './StnCollapseSearch.scss'
import {ref, watch} from 'vue'
import {useWindowSize, useElementSize} from '@vueuse/core'

/**
 * 组件配置选项
 */
defineOptions({
  name: 'StnCollapseSearch',
})

/**
 * 组件参数
 */
const props = withDefaults(
  defineProps<{
    // 标题
    title?: string;
    // 是否使用折叠面板形式
    collapse?: boolean;
    // 使用折叠面板形式时，默认情况下是否展开
    expendDefault?: boolean;
    // 使用折叠面板形式时，触发折叠展开的区域
    triggerAreas?: Array<("extra" | "main" | "arrow")>;
    // 操作按钮是否折叠
    operationsCollapse?: boolean;
    // 重置按钮文本
    resetText?: string;
    // 搜索按钮文本
    searchText?: string;
    // 是否开启操作按钮的响应式收缩，操作按钮响应式收缩策略，self-根据组件宽度；screen-根据屏幕宽度
    responsive?: 'self' |'screen' | false;
    // 操作按钮响应式收缩的宽度阈值
    responsiveWidth?: number;
  }>(),
  {
    title: '搜索',
    collapse: true,
    expendDefault: false,
    triggerAreas: ['main', 'arrow'] as any,
    operationsCollapse: false,
    resetText: '重置',
    searchText: '搜索',
    responsive: 'self',
    responsiveWidth: 375,
  }
)

/**
 * 组件自定义事件
 */
const emits = defineEmits<{
  /**
   * 搜索事件
   *
   * @param {"search"} e 事件名称
   */
  (e: 'search'): void;
  /**
   * 搜索条件重置事件
   *
   * @param {"reset"} e 事件名称
   */
  (e: 'reset'): void;
}>()

/**
 * 操作按钮的响应式收缩处理
 */
const isBtnResponsiveCollapse = ref(props.responsive ? props.operationsCollapse : false)
const {width: windowWidth} = useWindowSize()
const stnCollapseSearchRef = ref<HTMLDivElement | null>(null)
const {width: stnCollapseSearchWidth} = useElementSize(stnCollapseSearchRef)
watch(
  () => {
    if (props.responsive ==='self') return stnCollapseSearchWidth.value
    else return windowWidth.value
  },
  (w) => {
    if (!props.responsive) return
    isBtnResponsiveCollapse.value = w <= props.responsiveWidth
  },
  {immediate: true}
)
</script>

<template>
  <div class="stn-collapse-search" ref="stnCollapseSearchRef">
    <n-collapse
      v-if="collapse"
      :trigger-areas="triggerAreas"
      :default-expanded-names="expendDefault ? ['1'] : []"
    >
      <n-collapse-item :title="title" name="1">
        <template #arrow>
          <slot name="arrow"></slot>
        </template>
        <template #header>
          <slot name="title"></slot>
        </template>
        <template #header-extra>
          <slot name="operations" :isCollapse="responsive ? isBtnResponsiveCollapse : operationsCollapse">
            <div class="stn-collapse-search__operations">
              <slot name="reset" :isCollapse="responsive ? isBtnResponsiveCollapse : operationsCollapse">
                <StnCollapsePopBtn
                  :is-collapse="responsive ? isBtnResponsiveCollapse : operationsCollapse"
                  :btn-text="resetText"
                  @click="() => emits('reset')"
                >
                  <template #icon>
                    <slot name="reset-icon">
                      <st-icon-iconify :icon="Reload"/>
                    </slot>
                  </template>
                </StnCollapsePopBtn>
              </slot>
              <slot name="search" :isCollapse="responsive ? isBtnResponsiveCollapse : operationsCollapse">
                <StnCollapsePopBtn
                  type="primary"
                  :is-collapse="responsive ? isBtnResponsiveCollapse : operationsCollapse"
                  :btn-text="searchText"
                  @click="() => emits('search')"
                >
                  <template #icon>
                    <slot name="search-icon">
                      <st-icon-iconify :icon="Search"/>
                    </slot>
                  </template>
                </StnCollapsePopBtn>
              </slot>
            </div>
          </slot>
        </template>
        <template #default>
          <slot name="default"></slot>
        </template>
      </n-collapse-item>
    </n-collapse>
    <div v-else>
      <div class="stn-collapse-search-not-collapse">
        <slot name="title">
          <div class="stn-collapse-search-not-collapse__title">{{ title }}</div>
        </slot>
        <slot name="operations">
          <div class="stn-collapse-search__operations">
            <slot name="reset">
              <StnCollapsePopBtn
                :is-collapse="operationsCollapse"
                :btn-text="resetText"
                @click="() => emits('reset')"
              >
                <template #icon>
                  <slot name="reset-icon">
                    <st-icon-iconify :icon="Reload"/>
                  </slot>
                </template>
              </StnCollapsePopBtn>
            </slot>
            <slot name="search">
              <StnCollapsePopBtn
                type="primary"
                :is-collapse="operationsCollapse"
                :btn-text="searchText"
                @click="() => emits('search')"
              >
                <template #icon>
                  <slot name="search-icon">
                    <st-icon-iconify :icon="Search"/>
                  </slot>
                </template>
              </StnCollapsePopBtn>
            </slot>
          </div>
        </slot>
      </div>
      <div>
        <slot name="default"></slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
